<template>
  <div class="multiple-choice">
    <el-form-item style="margin-bottom: 0px" :label="data.label"  :label-width="data.label? '140px': '1px'" :prop="data.prop">
      <el-checkbox-group v-if="data.type === 'checkbox-group'" :style="data.style">
        <el-checkbox :label="option.value" v-for="option in data.options" :key="option.value">
          <Cloze v-if="option.type === 'cloze'" :form="form" :data="option" @value-change="valueChange" />
          <span v-else>
            {{option.label}}
          </span>  
        </el-checkbox>
      </el-checkbox-group>
      <el-radio-group v-else :value="form[data.prop]" @input="handleInput(data.prop, $event)" :style="data.style">
        <el-radio :label="option.value" v-for="option in data.options" :key="option.value">
            <Cloze v-if="option.type === 'cloze'" :form="form" :data="option" @value-change="valueChange" />
            <span v-else>
              {{ option.label }}
            </span>
        </el-radio>
      </el-radio-group>
    </el-form-item>
  </div>
</template>

<script>
import Cloze from "./Cloze.vue";

export default {
  name: "multiple-choice",
  components: {
    Cloze,
  },
  props: {
    form: {
      type: Object,
      required: true,
    },
    data: {
      type: Object,
      required: true,
    },
  },
  methods: {
    valueChange(propName, value) {
      this.$emit("value-change", propName, value);
    },
    handleInput(propName, e) {
      this.$emit("value-change", propName, e);
    },
  },
};
</script>

<style>
  .multiple-choice {
    margin-bottom: 15px;
  }
</style>
